<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('家族结构管理')" />
    <th:block th:include="include :: select2-css" />
    <link rel="stylesheet" href="/orgchart/css/jquery.orgchart.css">
    <link rel="stylesheet" href="/orgchart/css/style.css">
    <style type="text/css">
        .orgchart .blue-cls .title { background-color: #006699; }
        .orgchart .blue-cls .content { border-color: #006699; }
        .orgchart .rose-red-cls .title { background-color: #D9534FCC; }
        .orgchart .rose-red-cls .content { border-color: #D9534FCC; }
        .orgchart .bright-red-cls .title { background-color: #cc0066; }
        .orgchart .bright-red-cls .content { border-color: #cc0066; }
        .orgchart .content { font-weight: bold; }
    </style>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>家族：</label>
                                <select id="surnameId" name="surnameId">
                                    <option value="">请选择家族</option>
                                    <option th:each="dict : ${fcanList}" th:text="${dict.name}" th:value="${dict.cId}"></option>
                                </select>
                            </li>
                            <li>
                                <label>家族成员：</label>
                                <select id="memberId" name="memberId" class="form-control select2-multiple">
                                    <option value="">请选择家族成员</option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="getOrgChartByMId()"><i class="fa fa-search"></i>&nbsp;生成结构图 </a>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="exportPng()"><i class="fa fa-search"></i>&nbsp;导出图片 </a>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="exportPdf()"><i class="fa fa-search"></i>&nbsp;导出PDF </a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <!--  结构图显示开始  -->
            <div class="col-sm-12 select-table table-striped" style="height:86%;">
                <div id="chart-container" style="height:100%;"></div>
            </div>
            <!--  结构图显示结束  -->
        </div>
    </div>
     <th:block th:include="include :: footer" />
     <th:block th:include="include :: select2-js" />
     <script type="text/javascript" src="/orgchart/js/es6-promise.auto.min.js"></script>
     <script type="text/javascript" src="/orgchart/js/html2canvas.min.js"></script>
     <script type="text/javascript" src="/orgchart/js/jspdf.umd.min.js"></script>
     <script type="text/javascript" src="/orgchart/js/jquery.orgchart.js"></script>
     <script th:inline="javascript">
         var prefix = ctx + "family/orgchart";
         var chartObj = null;
         var isSuccess = false;//是否生成图片成功

         //家族列表选择项改变联动其他下拉列表改动
         $("#surnameId").change(function (){
             var surnameIdVal = $("#surnameId").val();
             if(surnameIdVal != ""){
                 //清空家族成员下拉列表
                 var memberIdSEL = $("#memberId");
                 memberIdSEL.empty();
                 memberIdSEL.append("<option value=''>请选择家族成员</option>");
                 $.ajax({
                     url: prefix + "/clanSelectChange",
                     type: 'GET',
                     data: {
                         surnameId: surnameIdVal
                     },
                     success: function (data) {
                         if(data.code == 0 && data.rows.length > 0){
                             //联动家族成员下拉列表
                             var memberList = data.rows[0].memberList;
                             if(memberList.length > 0){
                                 for (var k = 0; k < memberList.length; k++) {
                                     var selectedStr = "";
                                     if(k == 0){
                                         selectedStr = " selected ";
                                     }
                                     memberIdSEL.append("<option value='" + memberList[k].mId+ "'" + selectedStr + ">" + memberList[k].fullName + "（第" + memberList[k].numSort + "世）</option>");
                                 }
                             }
                         }
                     }
                 });
             }
         });

         //根据家族成员id生成组织结构图
         function getOrgChartByMId(){
             isSuccess = false;
             var memberIdVal = $("#memberId").val();
             if(memberIdVal != "") {
                 $.ajax({
                     url: prefix + "/getOrgChartByMId",
                     type: 'GET',
                     data: {
                         mId: memberIdVal
                     },
                     success: function (data) {
                         if (chartObj == null) {
                             chartObj = $('#chart-container').orgchart({
                                 'data': data,
                                 'nodeContent': 'title',
                                 'pan': false,
                                 'zoom': false,
                                 'zoomoutLimit': 0.5,
                                 'zoominLimit': 7,
                                 'direction': 't2b'
                             });
                             isSuccess = true;
                         } else {
                             chartObj.init({
                                 'data': data,
                                 'nodeContent': 'title',
                                 'pan': false,
                                 'zoom': false,
                                 'zoomoutLimit': 0.5,
                                 'zoominLimit': 7,
                                 'direction': 't2b'
                             });
                             isSuccess = true;
                         }
                     }
                 });
             }else{
                 $.modal.alertError("请选择家族或家族成员");
             }
         }

         //导出图片
         function exportPng(){
             if(isSuccess){
                 let chartDiv = document.getElementById("orgchart");
                 // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
                 html2canvas(chartDiv, {
                     width: chartDiv.offsetWidth, //截图宽度
                     height: chartDiv.offsetHeight, //截图高度
                     backgroundColor: '#FFFFFF', //画出来的图片有白色的边框,不要可设置背景为透明色（null）
                     useCORS: true, //支持图片跨域
                     scale: 1.5, //设置放大的倍数
                 }).then((canvas) => {
                     //把生成的base64位图片并下载
                     const a = document.createElement('a');
                     a.href = canvas.toDataURL('image/png', 1);
                     a.download = $("#memberId").select2('data')[0].text + "子孙结构图" + `${Date.now()}`;
                     a.click();
                 });
             }else{
                 $.modal.alertError("请先生成图片成功后再导出");
             }
         }

         //导出PDF
         function exportPdf(){
             if(isSuccess){
                 let chartDiv = document.getElementById("orgchart");
                 // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
                 html2canvas(chartDiv, {
                     width: chartDiv.offsetWidth, //截图宽度
                     height: chartDiv.offsetHeight, //截图高度
                     backgroundColor: '#FFFFFF', //画出来的图片有白色的边框,不要可设置背景为透明色（null）
                     useCORS: true, //支持图片跨域
                     scale: 1, //设置放大的倍数
                 }).then((canvas) => {
                     var doc = {};
                     var docWidth = Math.floor(chartDiv.offsetWidth);
                     var docHeight = Math.floor(chartDiv.offsetHeight);
                     if (!window.jsPDF) {
                         window.jsPDF = window.jspdf.jsPDF;
                     }
                     if (docWidth > docHeight) {
                         //考虑超出14400上限的情况
                         if(docWidth >= 14400) {
                             docWidth = 14400;
                             docHeight = Math.floor(14400 * chartDiv.offsetHeight / chartDiv.offsetWidth);
                         }
                         doc = new jsPDF({
                             orientation: 'landscape',
                             unit: 'px',
                             format: [docWidth, docHeight]
                         });
                     } else {
                         //考虑超出14400上限的情况
                         if(docHeight >= 14400) {
                             docHeight = 14400;
                             docWidth = Math.floor(14400 * chartDiv.offsetWidth / chartDiv.offsetHeight);
                         }
                         doc = new jsPDF({
                             orientation: 'portrait',
                             unit: 'px',
                             format: [docHeight, docWidth]
                         });
                     }
                     doc.addImage(canvas.toDataURL('image/png', 1), 'png', 0, 0);
                     doc.save($("#memberId").select2('data')[0].text + "子孙结构图" + `${Date.now()}` + '.pdf');
                 });
             }else{
                 $.modal.alertError("请先生成图片成功后再导出");
             }
         }
     </script>
</body>
</html>